<template>
  <div class="search flex-between">
    <div class="left flex-start">
      <div class="date">
        <label for="">姓名</label
        ><input class="searchInput" type="text" placeholder="请输入姓名" v-model="adminName" />
      </div>
      <div class="type">
        <label for="">邮箱号码</label
        ><input class="searchInput" type="text" placeholder="请输入邮箱号码" v-model="adminEmail" />
      </div>
      <div class="type">
        <label for="">职位</label
        ><input
          @focus="flag = false"
          @blur="blur"
          class="searchInput"
          type="text"
          placeholder="请选择职位"
          v-model="roleName"
        />
        <div @click="flag = !flag" class="pic">
          <img :src="imgurl" alt="" />
        </div>
        <ul v-show="flag === false" class="options">
          <li v-for="(item,index) in options" :key="index" @click="choice(item.roleName)">
            {{ item.roleName}}
          </li>
        </ul>
      </div>
    </div>
    <div class="btnbox flex-start">
      <div class="btn-white2 cp" @click="reset">重置</div>
      <div class="btn-blue2 cp" @click="search" >查询</div>
    </div>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'
export default {
  props: {
    state: {
      default: 0
    }
  },
  data () {
    return {
      flag: true,
      options: ['管理员', '超级管理员'],
      roleName: null,
      adminName: null,
      adminEmail: null

    }
  },
  created () {
    this.$store.commit('systemManage/set_adminEmail', '')// 置空
    this.$store.commit('systemManage/set_roleName', '')
    this.$store.commit('systemManage/set_adminName', '')
    this.$store.dispatch('systemManage/getRolelistData').then(res => {
      this.options = res.data
    })
  },
  computed: {
    imgurl () {
      if (this.flag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    },

    imgurl2 () {
      if (this.addFlag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }
  },
  methods: {
    choice (val) {
      this.roleName = val
      this.flag = true
    },
    blur () {
      setTimeout(() => {
        this.flag = true
      }, 200)
    },
    // 查询
    search () {
      // console.log(this.adminEmail, this.roleName, this.adminName)
      this.$store.commit('systemManage/set_adminEmail', this.adminEmail)
      this.$store.commit('systemManage/set_roleName', this.roleName)
      this.$store.commit('systemManage/set_adminName', this.adminName)
      this.$store.commit('feedback/set_page', 1)
      this.$store.commit('feedback/set_size', 10)
      switch (this.state) {
        case 0:
          this.$store.dispatch('systemManage/getAllAdminData').catch(res => {
            this.$message({
              type: 'error',
              message: res,
              duration: 1000
            })
          })
          break
        case 1:
          this.$store.dispatch('systemManage/getRegisteredData').catch(res => {
            this.$message({
              type: 'error',
              message: res,
              duration: 1000
            })
          })
          break
        case 2:
          this.$store.dispatch('systemManage/getUnRegisterData').catch(res => {
            this.$message({
              type: 'error',
              message: res,
              duration: 1000
            })
          })
          break
      }
    },
    reset () {
      this.adminEmail = null
      this.roleName = null
      this.adminName = null
    }
  }

}
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 80px;
  background-color: #fff;
  // margin-top: 24px;
  position: relative;
  font-size: 14px;
  color: #3d4966;
  border-radius: 8px;
  padding: 0 24px;
  div {
    label {
      margin-right: 12px;
    }
  }
  .date {
    margin-left: 12px;
  }
  .type {
    margin-left: 20px;
  }
  .email {
    margin-left: 20px;
  }
  .btnbox {
    .btn-white2 {
      margin-right: 20px;
    }
  }
}
</style>
